<template>
    <div id="whole">
      <!-- 全部   -->
      <van-dropdown-menu active-color="#1779ff">
        <van-dropdown-item title="全部"
                           ref="ref2">
          <van-cell>
            <template>
              <button class="num"
                      v-for="item in goodslist"
                      :class="[goodslistId == item.id ? 'active' : '']"
                      :key="item.id"
                      @click="goods(item.id)">
                {{ item.categoryName }}
              </button>
            </template>
          </van-cell>
          <div style="padding: 5px 16px">
            <van-button type="danger"
                        block
                        @click="onConfirm1">
              确认
            </van-button>
          </div>
        </van-dropdown-item>
      </van-dropdown-menu>
      <!--  -->
    </div>
</template>

<script>
export default {
    props: {

    },
    data() {
        return {
  goodslist: [], //商品分类
   goodslistId: 0, //商品id
        };
    },
    computed: {

    },
    created() {
    this.getProCategories() //商品分类
    },
    mounted() {

    },
    watch: {

    },
    methods: {
    // 关闭弹窗(全部中的确定按钮)
    onConfirm1() {
      this.$emit('formatwdate3', this.goodslistId)
      this.$refs.ref2.toggle()
    },
        // 商品类目接口
    getProCategories() {
      return this.$axios({
        method: 'get',
        url: '/api/product/GetProCategoriesNew',
      })
        .then((res) => {
          //   全部中的商品名称
          this.goodslist = res.data.data
        })
        .catch((error) => {
          console.log(error)
        })
    },
    
    goods(id) {
      this.goodslistId = id
    },
    },
    components: {

    },
};
</script>

<style scoped lang="">

</style>
